<script setup lang="ts">
// ----------------------- 导入相关依赖 -----------------------
// Vue 核心功能
import { nextTick, onMounted, onUnmounted, reactive, ref } from 'vue'
// Element Plus 组件和类型
import { ElMessage, FormInstance } from 'element-plus'
// Element Plus 图标
import { Search, Refresh, View } from '@element-plus/icons-vue'
// API和类型定义
import { getBomDetailByCodeApi, getBomStructure } from '@/api/bom'
import type { BomForm, BomMaterialDto, BomProcessDto } from '@/api/bom/type'

// ----------------------- 组件状态定义 -----------------------
// 表格高度自适应
const tableHeight = ref(0)

// 搜索表单
const searchForm = reactive({
  bomCode: undefined as string | undefined,
})

// BOM详细信息
const bomDetail = ref<BomForm>()
const loading = ref(false)

// BOM结构数据
const bomStructure = ref<any[]>([])
const structureLoading = ref(false)

// ----------------------- 方法定义 -----------------------
// 查询方法
const search = async () => {
  if (!searchForm.bomCode) {
    ElMessage.warning('请输入BOM编码')
    return
  }

  loading.value = true
  structureLoading.value = true
  try {
    // 获取BOM详情
    const detailRes = await getBomDetailByCodeApi(searchForm.bomCode)
    if (detailRes?.data) {
      bomDetail.value = detailRes.data
    }

    // 获取BOM结构
    const structureRes = await getBomStructure(searchForm.bomCode)
    if (structureRes?.data) {
      bomStructure.value = [structureRes.data]
    }
  } catch (error) {
    console.error('获取BOM信息失败:', error)
  } finally {
    loading.value = false
    structureLoading.value = false
  }
}

// 重置查询条件
const reset = () => {
  searchForm.bomCode = undefined
  bomDetail.value = undefined
  bomStructure.value = []
}

// 监听窗口大小变化
const handleResize = () => {
  nextTick(() => {
    tableHeight.value = window.innerHeight - 300
  })
}

// 生命周期钩子
onMounted(() => {
  handleResize()
  window.addEventListener('resize', handleResize)
})

onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
})
</script>

<template>
  <div class="bom-data-container">
    <!-- 搜索区域 -->
    <el-card class="search-card">
      <el-form :inline="true"
               :model="searchForm">
        <el-form-item label="BOM编码">
          <el-input v-model="searchForm.bomCode"
                    placeholder="请输入BOM编码" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary"
                     @click="search">
            <el-icon>
              <Search />
            </el-icon>
            查询
          </el-button>
          <el-button @click="reset">
            <el-icon>
              <Refresh />
            </el-icon>
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <div class="content-area"
         v-if="bomDetail">
      <!-- BOM基本信息 -->
      <el-card class="detail-card"
               v-loading="loading">
        <template #header>
          <div class="card-header">
            <span>BOM基本信息</span>
          </div>
        </template>
        <el-descriptions :column="3"
                         border>
          <el-descriptions-item label="BOM编码">{{ bomDetail.bomCode }}</el-descriptions-item>
          <el-descriptions-item label="BOM名称">{{ bomDetail.bomName }}</el-descriptions-item>
          <el-descriptions-item label="规格">{{ bomDetail.specification }}</el-descriptions-item>
          <el-descriptions-item label="品牌">{{ bomDetail.brand }}</el-descriptions-item>
          <el-descriptions-item label="生产厂家">{{ bomDetail.manufacturer }}</el-descriptions-item>
          <el-descriptions-item label="材质">{{ bomDetail.materialType }}</el-descriptions-item>
          <el-descriptions-item label="米重(kg/m)">{{ bomDetail.unitWeight }}</el-descriptions-item>
          <el-descriptions-item label="面积(m²/m)">{{ bomDetail.unitArea }}</el-descriptions-item>
          <el-descriptions-item label="总重(kg/件)">{{ bomDetail.totalWeight }}</el-descriptions-item>
          <el-descriptions-item label="厚度(mm)">{{ bomDetail.thickness }}</el-descriptions-item>
          <el-descriptions-item label="状态">
            <el-tag :type="bomDetail.isActive === 0 ? 'success' : 'danger'">
              {{ bomDetail.isActive === 0 ? '启用' : '禁用' }}
            </el-tag>
          </el-descriptions-item>
        </el-descriptions>

        <!-- 成本信息 -->
        <div class="cost-info">
          <el-descriptions :column="3"
                           border>
            <el-descriptions-item label="物料总成本">
              <span class="price warning">¥{{ bomDetail.materialTotalPrices || 0 }}</span>
            </el-descriptions-item>
            <el-descriptions-item label="工序总成本">
              <span class="price success">¥{{ bomDetail.processTotalPrices || 0 }}</span>
            </el-descriptions-item>
            <el-descriptions-item label="总成本">
              <span class="price danger">¥{{ bomDetail.totalPrices || 0 }}</span>
            </el-descriptions-item>
          </el-descriptions>
        </div>

        <!-- 物料清单 -->
        <div class="material-list">
          <div class="sub-title">物料清单</div>
          <el-table :data="bomDetail.bomMaterialDtoList"
                    border
                    style="width: 100%">
            <el-table-column type="index"
                             label="序号"
                             width="70"
                             align="center" />
            <el-table-column prop="materialCode"
                             label="物料编码"
                             min-width="120" />
            <el-table-column prop="materialName"
                             label="物料名称"
                             min-width="120" />
            <el-table-column prop="specification"
                             label="规格"
                             min-width="120" />
            <el-table-column prop="quantity"
                             label="数量"
                             width="100"
                             align="right" />
            <el-table-column prop="unitName"
                             label="单位"
                             width="80"
                             align="center" />
            <el-table-column prop="purchasePrice"
                             label="单价"
                             width="120"
                             align="right">
              <template #default="scope">
                ¥{{ scope.row.purchasePrice || 0 }}
              </template>
            </el-table-column>
            <el-table-column prop="cost"
                             label="成本"
                             width="120"
                             align="right">
              <template #default="scope">
                ¥{{ scope.row.cost || 0 }}
              </template>
            </el-table-column>
          </el-table>
        </div>

        <!-- 工序清单 -->
        <div class="process-list">
          <div class="sub-title">工序清单</div>
          <el-table :data="bomDetail.bomProcessDtoList"
                    border
                    style="width: 100%">
            <el-table-column type="index"
                             label="序号"
                             width="70"
                             align="center" />
            <el-table-column prop="processCode"
                             label="工序编码"
                             min-width="120" />
            <el-table-column prop="processName"
                             label="工序名称"
                             min-width="120" />
            <el-table-column prop="cost"
                             label="成本"
                             width="120"
                             align="right">
              <template #default="scope">
                ¥{{ scope.row.cost || 0 }}
              </template>
            </el-table-column>
            <el-table-column prop="description"
                             label="描述"
                             min-width="200" />
          </el-table>
        </div>
      </el-card>

      <!-- BOM结构 -->
      <el-card class="structure-card"
               v-loading="structureLoading">
        <template #header>
          <div class="card-header">
            <span>BOM结构</span>
          </div>
        </template>
        <el-table :data="bomStructure"
                  row-key="id"
                  border
                  default-expand-all
                  :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
          <el-table-column prop="bomCode"
                           label="BOM编码"
                           min-width="150" />
          <el-table-column prop="bomName"
                           label="BOM名称"
                           min-width="150" />
          <el-table-column prop="quantity"
                           label="数量"
                           width="100"
                           align="right">
            <template #default="scope">
              <el-tag size="small"
                      type="info"
                      v-if="scope.row.quantity">
                {{ scope.row.quantity }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="purchasePrice"
                           label="单价"
                           width="120"
                           align="right">
            <template #default="scope">
              <el-tag size="small"
                      type="warning"
                      v-if="scope.row.purchasePrice != null">
                ¥{{ scope.row.purchasePrice }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="totalPrices"
                           label="总价"
                           width="120"
                           align="right">
            <template #default="scope">
              <el-tag size="small"
                      type="danger">
                ¥{{ scope.row.totalPrices }}
              </el-tag>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
  </div>
</template>

<style scoped lang="scss">
.bom-data-container {
  padding: 15px;

  .search-card {
    margin-bottom: 15px;
  }

  .content-area {
    display: flex;
    gap: 15px;

    .detail-card {
      flex: 3;

      .cost-info {
        margin: 15px 0;
      }

      .sub-title {
        font-size: 16px;
        font-weight: bold;
        margin: 15px 0;
        color: #606266;
      }

      .price {
        font-weight: bold;
        &.warning {
          color: #e6a23c;
        }
        &.success {
          color: #67c23a;
        }
        &.danger {
          color: #f56c6c;
        }
      }
    }

    .structure-card {
      flex: 2;
    }
  }

  :deep(.el-card__body) {
    padding: 15px;
  }

  :deep(.el-descriptions) {
    margin-bottom: 15px;
  }

  :deep(.el-tag--small) {
    height: 22px;
    padding: 0 8px;
    font-size: 12px;
  }
}
</style>
